<template>
    <div class="box" :style="boxStyle" @click="isClick">
        <div class="contanier">
            <div class="left">
                <div class="detail">
                    <img :src="heard" alt="">
                    <div class="right">
                        <p class="name">{{ name }}</p>
                        <p class="account">{{ account }}</p>
                    </div>
                </div>
            </div>
            <div class="right1" @click="back">
                <el-icon>
                    <CloseBold />
                </el-icon>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { AllList, photo_list } from "../api/request";
import api from "../api/index"
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted, computed } from 'vue'
const $route = useRoute()
const $rouer = useRouter()
let { id } = $route.query
const path = id.substring(id.indexOf('/static')); // 从'/static'开始提取
// console.log(path);
const account = ref('')
const name = ref('')
const data1 = ref([])
const data2 = ref([])
const photo = ref(null)
const heard = ref('')
const back = () => {
    $rouer.replace({path:'/home'})
}
const isClick = () => {
    $rouer.replace({path:'/home'})
}
const boxStyle = computed(() => ({
      backgroundImage: `url(${id})`
    }));
const dataFn = async () => {
    const content1 = await AllList()
    const content2 = await photo_list()
    // console.log(content1)
    // console.log(content2)
    const { code, result } = content1
    if (code == 200) {
        data1.value = result.map((item) => {
            return {
                name: item.昵称,
                account: item.账号,
                headimg: item.头像
            }
        })
        // console.log(data1.value)
        
        // account.value = data1.value.map((item)=>item.account)
        // console.log(name.value);
        // console.log(account.value)
    }
    if (content2.code == 200) {
        data2.value = content2.result.map((item) => {
            return {
                account: item.account,
                photos: item.photo.split('\n').map((photoPath: string) => photoPath.trim()).filter(Boolean)
            }
        })
        // console.log(data2.value)
        const foundPhoto = data2.value.find(item => item.photos.includes(path));
        if (foundPhoto) {
            photo.value = foundPhoto;
            account.value = photo.value.account
            // console.log(account.value); 
        } 
        else {
            console.log('No account found for the specified photo.');
        }
        const foundname = data1.value.find((item) => item.account === account.value);
        if(foundname){
            name.value = foundname.name
            heard.value = api.url + foundname.headimg
            // console.log(heard.value)
        }
    }

}
onMounted(() => {
    dataFn()
})
</script>
<style scoped lang="scss">
.box {
    width: 375px;
    height: 667px;
    /* background-color: red; */
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

    .contanier {
        width: 90%;
        height: 40px;
        align-items: center;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 50px;

        .left {
            width: 140px;
            height: 40px;

            .detail {
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: center;

                img {
                    width: 40px;
                    height: 40px;
                    // background-color: red;
                    background-image: url(../assets/img/heard.jpg);
                    border-radius: 50%;
                }

                .right {
                    height: 100%;

                    .name {
                        font-size: 15px;
                        font-weight: bold;
                    }

                    .account {
                        font-size: 11px;
                        margin-top: 5px;
                    }
                }
            }
        }

        .right1 {
            width: 32px;
            height: 32px;
            // i{
            //     display: block;
            //     width: 100%;
            //     height: 100%;
            //     background-repeat: no-repeat;
            //     background-size: cover;
            //     background-image: url(../assets/img/fork.jpg);
            // }
        }
    }
}
</style>